<template>
  <div class="card-warp">
    <PageTitle :title="name">
      <template v-slot:operate>
        <n-button size="large" @click="copyUUID">
          <Copy theme="outline" size="15" :strokeWidth="3" style="margin-right: 4px"/><span>UUID</span>
        </n-button>
      </template>
    </PageTitle>
    <p class="card-item">-- created on {{ created.split('T')[0] }}</p>
    <div class="card-item flex">
      <span class="subtitle">MetaStore</span>
      <span>{{ metadata.engine.split(':')[0] }}</span>
    </div>
    <div class="card-item flex" >
      <span class="subtitle">ObjectStore</span>
      <span>{{ object_store.provider }}</span>
    </div>
    <div class="card-item">
      <SettingSwitch class="subtitle" :title="'S3Gateway'"/>
      <p class="server"><span class="subtitle">-- server on </span><span v-show="s3_gateway">{{s3_gateway?.listen_url}}:{{s3_gateway?.port}}</span></p>
    </div>
    <div class="card-item">
      <SettingSwitch class="subtitle" :title="'WebDEV'"/>
      <p class="server"><span class="subtitle">-- server on </span><span v-show="webdav_gateway">{{webdav_gateway?.listen_url}}:{{webdav_gateway?.port}}</span></p>
    </div>
    <div class="flex btm">
      <n-button class="btn" >Config</n-button>
      <n-button class="btn" type="error">Destroy</n-button>
    </div>
  </div>
</template>

<script setup>
import { Copy } from '@icon-park/vue-next'
import { NButton, useMessage } from 'naive-ui'
import { defineProps } from 'vue'
import PageTitle from '@/components/PageTitle'
import SettingSwitch from '@/components/fsConfig/SettingSwitch'
let { data } = defineProps(['data'])
let { name, uuid, created, fs_definition } = data
let { metadata, object_store, s3_gateway, webdav_gateway } = fs_definition

const message = useMessage()
import useClipboard from 'vue-clipboard3';
let { toClipboard } = useClipboard();
async function copyUUID() {
  try {
    await toClipboard(uuid);
    message.success('复制成功');
  } catch (e) {
    console.log(e)
  }
}

/*let S3GatewayAble = ref(S3Gateway.able)
let WebDEVAble = ref(WebDEV.able)*/

</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.card-warp {
  padding: 40px;
  border: 1px solid var(--settingBorderColor);
  border-radius: 10px;
}
.card-warp p {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
.server span:last-child {
  color: rgb(54,79,199);
}
.card-item {
  margin-bottom: 40px;
  font-size: var(--settingTitleFontSize);
}
.subtitle {
  font-weight: bold;
}
.btm {
  margin-top: 40px;
}
.btm .btn{
  width: 40%;
  height: 50px;
  border-radius: 10px;
  font-size: 18px;
}
</style>
